<template>
  <div class="button" :style="{ background: background, fontSize:fontsize + 'px' }" :class="{ btnactive : active }">
    <a :style="{ fontSize: fontsize + 'px' }">{{title}}</a>
  </div>
</template>

<script>
export default {
  name: 'header',
  data () {
    return {

    }
  },
  props: {
    title: {
      type: String,
      default: ''
    },
    background: {
      type: String,
      default: 'white'
    },
    fontsize: {
      type: Number,
      default: 16
    },
    active: {
      type: Boolean,
      default: false
    },
    color: {
      type: String,
      default: ''
    }
  },
  methods: {

  },
  created () {
    this.fontSize = this.fontSize * document.body.offsetWidth / 320
  }
}
</script>

<style lang="less" scoped>
* {
  display: flex;
  justify-content: center;
  align-items: center;  
}

.button {
  width: 90%;
  height: 4.52em;
  margin: 0 auto;
  border-radius: 1em;
  transition: all 0.3s;
}

.btnactive {
  background: #4D66FF !important;
  color: white !important;
  box-shadow: 0 1px 4px 0 rgba(102,102,102,0.50);
}

</style>